<template>
    <div class="share_content">
        <div id="qrCodeBox"></div>
    </div>
</template>
<script lang="tsx" setup>
import QRCode from 'qrcodejs2-fix';
import { watch } from "vue"
import { onMounted, ref, reactive, nextTick } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const emit = defineEmits(['qrCodeBoxClick'])
const getQrCode = (url) => {
    // DOM 都加载完毕再执行
    nextTick(() => {
        document.getElementById('qrCodeBox').innerHTML = '';
        new QRCode(document.getElementById('qrCodeBox'), {
            text: url, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
            width: 160, //二维码宽
            height: 160, //二维码高
        });
        console.log("二维码", document.getElementById('qrCodeBox'));
        setTimeout(() => {
            let parentElement: any = document.getElementById('qrCodeBox');
            let secondImgElement: any = parentElement.children[1];
            if (secondImgElement && secondImgElement.tagName === 'IMG') {
                // 获取其 src 属性  
                let secondImgSrc = secondImgElement.src;
                console.log("图片地址", secondImgSrc); // 输出图片地址 
                emit("qrCodeBoxClick",secondImgSrc)
            } else {
                console.log('第二个 img 元素不存在或不是有效的 img 标签');
            }
        }, 500);
    });
};
watch(() => props.data, (newValue: any) => {
    // console.log("生成二维码", newValue);
    getQrCode(newValue.url)
}, { deep: true, immediate: true })

</script> 


<style lang="less" scoped>
.share_content {
    width: 100%;

}
</style>